<template>
    <div class="main">
        <PageTitle :title="pageTitle"></PageTitle>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="姓名">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="银行名称">
                        <el-input v-model="form.back_name"></el-input>
                    </el-form-item>
                    <el-form-item label="卡号">
                        <el-input v-model="form.card"></el-input>
                    </el-form-item>
                    <el-form-item label="开户行地址">
                        <el-input v-model="form.bank"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">{{form.id?'修改':'提交'}}</el-button>
                        <el-button type="primary" v-if="user_state != 1" @click="del">删除</el-button>
                        <el-button v-if="user_state == 1" @click="close()">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        
    </div>
</template>
<script>
import PageTitle from "@/components/pageTitle/PageTitle.vue";
export default {
    components: {
        PageTitle
    },
    data(){
        return{
            form:{
                name:null,
                phone:null,
                back_name:null,
                card:null,
                bank:null,
                id:null,
            },
            user_state:localStorage.getItem('user_state')
        }
    },
    created(){
        this.getDetail()
    },
    mounted(){

    },
    computed: {
        pageTitle() {
            return !this.form.id ? "账户添加" : "账户详情";
        },
        submitUrl() {
            return !this.form.id
            ? this.$api + "/v1/account/account"
            : this.$api + "/v1/account/modify";
        }
    },
    methods:{
        //提交
        async onSubmit(){
            if (!this.form.name) {
                this.$message({
                    message: "姓名格式不正确",
                    type: "warning"
                });
            }else if (!this.form.phone) {
                this.$message({
                    message: "手机号格式不正确",
                    type: "warning"
                });
            } else if (!/^1[3456789]\d{9}$/.test(this.form.phone)) {
                this.$message({
                message: "号码格式不正确",
                type: "warning"
                });
                return false;
            } else if(!this.form.back_name){
                this.$message({
                    message: "银行名称格式不正确",
                    type: "warning"
                });
            }else if(!this.form.card){
                this.$message({
                    message: "卡号格式不正确",
                    type: "warning"
                });
            }else if(!this.form.bank){
                this.$message({
                    message: "开户行地址格式不正确",
                    type: "warning"
                });
            }else{
                let {data: { code, data }} = await this.$axios({
                    url: this.submitUrl,
                    method: "POST",
                    data: {
                        name:this.form.name,
                        bank:this.form.bank,
                        back_name:this.form.back_name,
                        card:this.form.card,
                        phone:this.form.phone
                    }
                });
                if (code == 0) {
                    this.$message.success(data);
                    /* setTimeout(() => {
                        this.$router.go(-1);
                    }, 1500); */
                }
            }
        },
        //获取详情
        async getDetail() {
            let {data:{code,data}} = await this.$axios({
                url: this.$api + "/v1/account/details",
                method: "GET",
                params: {}
            });
            console.log("获取详情----------", data,'code----',code);
      
            if (code == 0) {
                this.form={
                    bank:data.bank,
                    back_name:data.back_name,
                    name:data.name,
                    phone:data.phone,
                    card:data.card,
                    id:data.id
                }
            }else{
                this.form={
                    bank:null,
                    back_name:null,
                    name:null,
                    phone:null,
                    card:null,
                    id:null
                }
            }
        },
        del(){
            this.$confirm("确认删除吗？", "提示", {
                type: "warning"
            }).then(() => {
                this._del()
            });
        },
        async _del(){
            let {data: { code, data }} = await this.$axios({
                url: this.$api + "/v1/account/strike",
                method: "POST",
                data: {
                    id:this.form.id
                }
            });
            if (code == 0) {
                this.$message.success(data);
                this.getDetail();
            }
        },
        close() {
            this.$router.go(-1);
        }
    }
}
</script>